<template>
  <div class="path-detail">
    <el-card>
      <!-- 路径基本信息 -->
      <div class="path-header">
        <div class="path-info">
          <div class="path-icon" :class="path.color">
            <el-icon :size="60">
              <component :is="path.icon" />
            </el-icon>
          </div>
          <div class="info-content">
            <h1>{{ path.title }}</h1>
            <p class="description">{{ path.description }}</p>
            <div class="stats">
              <div class="stat-item">
                <el-icon><Reading /></el-icon>
                <span>{{ path.courses }}门课程</span>
              </div>
              <div class="stat-item">
                <el-icon><User /></el-icon>
                <span>{{ path.students }}位学员</span>
              </div>
              <div class="stat-item">
                <el-icon><Star /></el-icon>
                <span>{{ path.rating }}分</span>
              </div>
              <div class="stat-item">
                <el-icon><Clock /></el-icon>
                <span>预计{{ path.duration }}个月</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 讲师课程 -->
      <div class="teacher-courses">
        <h2>讲师课程</h2>
        <el-tabs v-model="activeTeacher" @tab-click="handleTeacherChange">
          <el-tab-pane
            v-for="teacher in teachers"
            :key="teacher.id"
            :label="teacher.name"
            :name="teacher.id"
          >
            <div class="teacher-info">
              <div class="teacher-header">
                <el-avatar :size="64" :src="teacher.avatar" />
                <div class="teacher-detail">
                  <h3>{{ teacher.name }}</h3>
                  <p class="title">{{ teacher.title }}</p>
                  <p class="description">{{ teacher.description }}</p>
                </div>
              </div>
              <div class="course-list">
                <el-card v-for="course in teacher.courses" :key="course.id" class="course-card" @click="goToCourse(course.id)">
                  <img :src="course.cover" class="course-cover" />
                  <div class="course-info">
                    <h4>{{ course.title }}</h4>
                    <p>{{ course.description }}</p>
                    <div class="course-meta">
                      <span class="students">{{ course.students }}人学习</span>
                      <span class="rating">{{ course.rating }}分</span>
                      <span class="duration">{{ course.duration }}</span>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Reading, User, Star, Clock } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 当前选中的讲师
const activeTeacher = ref('1')

// 路径信息
const path = ref({
  id: 1,
  title: '前端开发工程师',
  description: '从HTML/CSS到Vue3/React的完整学习路径',
  icon: 'Monitor',
  color: 'blue',
  courses: 24,
  students: 10000,
  rating: 4.9,
  duration: 6
})

// 讲师数据
const teachers = ref([
  {
    id: '1',
    name: '张老师',
    title: '资深前端架构师',
    avatar: 'https://picsum.photos/200/200?random=1',
    description: '10年前端开发经验，Vue.js核心贡献者，擅长前端架构设计',
    courses: [
      {
        id: 1,
        title: 'Vue3 实战教程',
        description: '从入门到精通，掌握Vue3开发技能',
        cover: 'https://picsum.photos/400/300?random=1',
        students: 1234,
        rating: 4.9,
        duration: '12周'
      },
      {
        id: 2,
        title: '前端工程化实践',
        description: '掌握现代前端工程化工具和最佳实践',
        cover: 'https://picsum.photos/400/300?random=2',
        students: 2345,
        rating: 4.8,
        duration: '8周'
      }
    ]
  },
  {
    id: '2',
    name: '李老师',
    title: '全栈开发专家',
    avatar: 'https://picsum.photos/200/200?random=2',
    description: '8年全栈开发经验，精通Node.js和微服务架构',
    courses: [
      {
        id: 3,
        title: 'Node.js 企业级应用开发',
        description: '从零开始构建企业级Node.js应用',
        cover: 'https://picsum.photos/400/300?random=3',
        students: 3456,
        rating: 4.7,
        duration: '10周'
      },
      {
        id: 4,
        title: '微服务架构实战',
        description: '深入理解微服务架构设计与实现',
        cover: 'https://picsum.photos/400/300?random=4',
        students: 4567,
        rating: 4.8,
        duration: '14周'
      }
    ]
  }
])

// 处理讲师切换
const handleTeacherChange = (tab) => {
  console.log('切换到讲师:', tab.props.name)
}

// 跳转到课程详情
const goToCourse = (id) => {
  router.push(`/course/${id}`)
}

onMounted(() => {
  // TODO: 根据路由参数获取路径信息
  console.log('Path ID:', route.params.id)
})
</script>

<style scoped>
.path-detail {
  padding: 20px;
}

.path-header {
  margin-bottom: 40px;
}

.path-info {
  display: flex;
  gap: 30px;
}

.path-icon {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.path-icon.blue {
  background: rgba(79, 172, 254, 0.1);
  color: var(--primary-color);
}

.info-content {
  flex: 1;
}

.info-content h1 {
  margin: 0 0 10px;
  font-size: 24px;
}

.description {
  margin-bottom: 20px;
  line-height: 1.6;
}

.stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--el-text-color-secondary);
}

.teacher-courses {
  margin-top: 40px;
}

.teacher-courses h2 {
  margin-bottom: 20px;
}

.teacher-info {
  padding: 20px 0;
}

.teacher-header {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.teacher-detail {
  flex: 1;
}

.teacher-detail h3 {
  margin: 0 0 10px;
  font-size: 20px;
}

.teacher-detail .title {
  color: var(--el-text-color-secondary);
  margin-bottom: 10px;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.course-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
}

.course-cover {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin-bottom: 15px;
}

.course-info h4 {
  margin: 0 0 10px;
  font-size: 16px;
}

.course-info p {
  color: var(--el-text-color-secondary);
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
</style> 